<!-- vue3响应式数据 -->
<script setup>
import Request from '../utils/request';
import { ref, reactive,onMounted ,computed} from 'vue';

// 页面加载时查询所有用户
onMounted(() => {
  selectAll();
});
// 输入框内容
const input=ref('');
// 用户数据表格
const tableData=ref([]);
// 新增用户对话框可见性
const addDialogVisible=ref(false);
// 新增用户表单数据
const addUserForm=reactive({
    name:'',
    birthday: '',
    sex:'',
    address:''
});
// 编辑用户对话框可见性
const editDialogVisible=ref(false);
 // 编辑用户表单数据
const editUserForm=reactive({
    id:'',
    name:'',
    birthday:'',
    sex:'',
    address:''
});
const filteredData = ref([]); // 用于存放过滤后的用户数据
const currentPage=ref(1); // 当前页码
const pageSize=ref(5); // 每页显示的数据条数
// 查询所有用户
const selectAll = () => {
    Request.get('/user')
        .then(response => {
            if (response.code == 0) {
                tableData.value = response.data;
                filteredData.value = tableData.value;
                return response.data;
            } else {
                // 提示查询失败
                console.error('查询失败');
            }
        })
        .catch(error => {
            console.log('Error while fetching data', error);
        });
};
// 根据ID查询单个用户
// const selectById = () => {
//     if (input.value.trim() === '') {
//         console.warn('请输入用户ID');
//         return;
//     }
//     Request.get(`/user/${input.value}`)
//         .then(response => {
//             if (response.code == 0) {
//                 tableData.value = response.data;
//                 return response.data;
//             } else {
//                 console.error('查询失败');
//             }
//         })
//         .catch(error => {
//             console.log('Error while fetching data', error);
//             console.error('查询失败');
//         });
// };
// 打开新增用户对话框
const showAddDialog = () => {
    addDialogVisible.value = true;
};
// 删除用户
const handleDelete = (row) => {
    // 弹出确认对话框
    // 这里假设使用了某个库来处理对话框，确保替换为实际代码
    // 弹出确认对话框
    const confirmed = window.confirm('确认删除该用户吗？');
    if (confirmed) {
        console.log(row.id);
        Request.delete(`/user/${row.id}`)
            .then(response => {
                console.log(response);
                if (response.code == 0) {
                    console.log('删除成功');
                    selectAll(); // 删除成功后重新加载表格数据
                } else {
                    console.error('删除失败');
                }
            })
            .catch(error => {
                console.log('Error while fetching data', error);
                console.error('删除失败');
            });
    } else {
        console.info('已取消删除');
    }
};
// 打开编辑用户对话框
const showEditDialog = (row) => {
    editDialogVisible.value = true;
    Object.assign(editUserForm, row); // 复制当前行数据到编辑表单
};
// 提交新增用户请求
const submitForm = () => {
    Request.post('/user', addUserForm)
        .then(response => {
            if (response.code == 0) {
                addDialogVisible.value = false;
                console.log('新增成功');
                Object.assign(addUserForm, { name: '', birthday: '', sex: '', address: '' }); // 重置表单
                selectAll(); // 新增成功后重新加载表格数据
            } else {
                console.error('新增失败');
            }
        })
        .catch(error => {
            console.log('Error while fetching data', error);
            console.error('新增失败');
        });
};
// 提交编辑用户请求
const submitEdit = () => {
    Request.put('/user', editUserForm)
        .then(response => {
            if (response.code == 0) {
                editDialogVisible.value = false;
                console.log('编辑成功');
                selectAll(); // 重新加载表格数据
            } else {
                console.error('更新失败');
            }
        })
        .catch(error => {
            console.log('Error while fetching data', error);
            console.error('更新失败');
        });
};
// 根据姓名模糊查询用户
const searchByName = () => {
  if (!input.value) {
    filteredData.value = tableData.value; // 如果没有输入，显示所有用户
  } else {
    filteredData.value = tableData.value.filter(user => {
        input.value = input.value.trim(); // 去除输入内容的前后空格
      return user.name.includes(input.value); // 根据姓名进行模糊查询
    });
  }
  currentPage.value=1;
  input.value=''; // 模糊查询后重置当前页为第一页
};

// 分页
// 根据当前页码和每页条数获取当前页的数据
const currentPageData=computed(()=>{
    const start=(currentPage.value-1)*pageSize.value;
    return filteredData.value.slice(start,start+pageSize.value);
})
// 出分页变化
const handlePageChange=(page)=>{
    currentPage.value=page;
}
</script>

<!-- 用户界面 -->
<template>
    <div>
        <!-- 查询,新增按钮及查询输入框 -->
        <el-row style="margin-top: 30px;margin-left: 60px;">
            <el-button type="primary" @click="selectAll">查询所有用户</el-button>
            <el-input v-model="input" style="width: 200px;margin-left: 100px;" placeholder="请输入内容"></el-input>
            <!-- 事实是不会根据id去查询而是通过模糊查询 -->
            <!-- <el-button type="primary" style="margin-left: 20px;" @click="selectById">查询</el-button> -->
            <el-button type="primary" style="margin-left: 20px;" @click="searchByName">查询</el-button>
            <el-button type="primary" @click="showAddDialog">新增</el-button>
        </el-row>

        <!-- 用户数据表格 -->
        <el-table :data="currentPageData" height="250" style="margin-top: 40px;">
            <el-table-column prop="id" label="序号" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="birthday" label="生日" width="180"></el-table-column>
            <el-table-column prop="sex" label="性别" width="180"></el-table-column>
            <el-table-column prop="address" label="地址" width="180"></el-table-column>
            <el-table-column label="操作" width="180">
            <!--vue2的v-slot="scope"表示插槽，主要作用是允许父组件向子组件传递内容，vue3是#default-->
                <template #default="{row}">
                    <!-- 表格的上下文中，scope 是一个对象 -->
                    <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
                    <el-button size="small" type="primary" @click="showEditDialog(row)">编辑</el-button>
                </template>
            </el-table-column>
         </el-table>
         
         <!-- 新增用户对话框 -->
          <!--:visible.sync确保父组件和子组件之间的数据同步
          当 addDialogVisible 为 true 时，对话框显示；为 false 时，对话框隐藏-->
          <el-dialog title="新增用户" v-model="addDialogVisible">
            <!--v-model: 用于直接在表单元素上实现双向数据绑定。
                model: 用于定义自定义组件的 v-model 行为，指定 prop 和事件。:+自定义名字-->
            <el-form label-width="80px" :model="addUserForm">
                <el-form-item label="姓名">
                    <el-input v-model="addUserForm.name"></el-input>
                </el-form-item>
                <el-form-item label="生日">
                    <el-date-picker type="date" v-model="addUserForm.birthday" placeholder="选择日期"  format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="addUserForm.sex">
                        <el-radio label="男" value="男"></el-radio>
                        <el-radio label="女" value="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input type="textarea" v-model="addUserForm.address"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addDialogVisible = false" style="margin-right: 450px;">取消</el-button>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                </el-form-item>
            </el-form>
          </el-dialog>
          
          <!--编辑用户对话框 -->
          <el-dialog title="编辑用户" v-model="editDialogVisible">
            <el-form ref="editUserFrom" label-width="80px" :model="editUserForm">
                <el-form-item label="姓名">
                    <el-input v-model="editUserForm.name"></el-input>
                </el-form-item>
                <el-form-item label="生日">
                    <el-date-picker type="date" placeholder="选择日期" v-model="editUserForm.birthday"></el-date-picker>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="editUserForm.sex">
                        <el-radio label="男" value="男"></el-radio>
                        <el-radio label="女" value="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input type="textarea" v-model="editUserForm.address"></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="editDialogVisible=false" type="primary" style="margin-left: 80px;">取消</el-button>
            <el-button @click="submitEdit" type="primary" style="margin-left: 450px;">确定</el-button>
          </el-dialog>
          <el-pagination
             background
             layout="prev, pager, next"
             :total="filteredData.length"
             :currentPage="currentPage"
             :page-size="pageSize"
             @current-change="handlePageChange"
             style="margin-top: 30px;margin-left: 800px;"
          />
    </div>
</template>

<style scoped>
</style>